/*
 * Copyright © 2016 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '../../styles/variables.scss';
$splash-font-color: #ffffff;
$card-font-color: #ffffff;
$button-background-color: $cdap-orange;
$card-background-color: $cdap-orange;

@keyframes topTransition {
  from { top: 0%; }
  to { top: 350px; }
}

.splash-screen-backdrop {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: #000000;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index: 1030;
}

.splash-screen {
  display: block;
  position: absolute;
  left: 50%;
  top: 350px;
  transform: translate(-50%, -65%);
  animation: topTransition ease-in-out 500ms;
  min-height: 400px;
  z-index: 1031;
  min-width: 600px;
  max-width: 640px;

  .card-header {
    position: relative;
  }
  .card-close-btn {
    position: absolute;
  }

  .card-header-splash {
    padding-top: 25px;

    h3 {
      text-align: center;
    }
  }

  .second-line-form {
    padding-top: 5px;
  }
  .splash-checkbox {
    padding-top: 10px;
    text-align: left;
    margin-bottom: -3px;
  }
  .registration-form {
    padding: 10px;
    text-align: left;
    margin: auto;
    input {
      outline: 0;
      margin-left: 10px;
      margin-right: 10px;
      height: 22px;
      border: none;
      background-color: transparent;
      border-bottom: 1px solid #ffffff;
      color: #ffffff;
    }

    ::-webkit-input-placeholder {
      color: #ffffff;
    }
    :-moz-j {
      color: #ffffff;
      opacity: 1;
    }
    ::-moz-placeholder {
      color: #ffffff;
      opacity: 1;
    }
    :-ms-input-placeholder {
      color: #ffffff;
    }

    .first-name,
    .last-name,
    .email {
      margin-left: 10px;
      margin-right: 10px;
    }

    .last-name {
      margin-left: 0;
    }
  }

  .icon-fist {
    color: $splash-font-color;
    font-size: 9em;
  }

  .version-label {
    padding-top: 10px;
    font-size: 11px;
    color: $splash-font-color;
  }

  .btn-buffer {
    width: 10px;
  }

  h4 {
    color: $splash-font-color;
    margin-top: 10px;
  }
  label {
    margin-top: 5px;
    &.align-left {
      text-align: left;
      display: block;
      margin-top: 10px;
    }
    > input[type=checkbox] {
      margin-right: 5px;
    }
  }
  .group {
    display: flex;
    justify-content: space-between;
    width: 290px;
    margin-left: auto;
    margin-right: auto;

    &.no-registration {
      justify-content: center;
    }
    .btn-secondary {
      background-color: $cdap-orange;
      color: $splash-font-color;
      border-color: $splash-font-color;
      width: 132px;
    }
    .btn-secondary:hover {
      background-color: $splash-font-color;
      color: $cdap-orange;
      border-color: $splash-font-color;
    }
  }

  .btn-icon {
    position: relative;
    right: 5px;
  }

  .cask-card {
    background-color: $cdap-orange;
    border-radius: 10px;
    border: 1px solid #993300;
    padding-top: 0;
    color: $card-font-color;
    box-shadow: 0 0 15px #000000;
    height: 100%;

    &.card-SM { width: 33%; }
    &.card-MD { width: 66%; }
    &.card-LG { width: 100%; }

    .card-header {
      background-color: $cdap-orange;
      padding: 0;
      border-bottom: 0;
      border-radius: inherit;

      div.fa.fa-times {
        color: $card-font-color;
        top: 12px;
        right: 15px;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: center;
    h3 {
      margin-top: 0;
    }
  }

  .card-body {
    padding-top: 0;
  }

  .fa.fa-times:hover {
    color: #00008b;
  }
}

.cask-video-container {
  margin-top: 40px;
  padding-bottom: 35px;
}

.splash-main-container {
  padding-top: 10px;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
